<template>
  <div class="change-password-page">
    <div class="page-header">
      <van-icon name="arrow-left" class="back-icon" @click="goBack" />
      <h1>修改密码</h1>
    </div>
    
    <div class="page-content">
      <van-form @submit="onSubmit">
        <!-- 原密码 -->
        <van-field
          v-model="formData.oldPassword"
          type="password"
          label="原密码"
          placeholder="请输入原密码"
          :rules="[{ required: true, message: '请输入原密码' }]"
          left-icon="lock-o"
          :password-visible="showOldPassword"
          :password-icon-position="'right'"
          @click:password-icon="showOldPassword = !showOldPassword"
        />
        
        <!-- 新密码 -->
        <van-field
          v-model="formData.newPassword"
          type="password"
          label="新密码"
          placeholder="请输入新密码"
          :rules="[
            { required: true, message: '请输入新密码' },
            { min: 6, message: '密码长度不能少于6位' },
            { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码必须包含数字和字母' }
          ]"
          left-icon="lock-o"
          :password-visible="showNewPassword"
          :password-icon-position="'right'"
          @click:password-icon="showNewPassword = !showNewPassword"
        />
        
        <!-- 确认新密码 -->
        <van-field
          v-model="formData.confirmPassword"
          type="password"
          label="确认新密码"
          placeholder="请再次输入新密码"
          :rules="[
            { required: true, message: '请确认新密码' },
            { validator: confirmPasswordValidator, message: '两次输入的密码不一致' }
          ]"
          left-icon="lock-o"
          :password-visible="showConfirmPassword"
          :password-icon-position="'right'"
          @click:password-icon="showConfirmPassword = !showConfirmPassword"
        />
        
        <div class="button-group">
          <van-button type="primary" native-type="submit" size="large" class="submit-btn">
            确认修改
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChangePassword',
  data() {
    return {
      formData: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      showOldPassword: false,
      showNewPassword: false,
      showConfirmPassword: false,
      submitting: false
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.back()
    },
    
    // 验证确认密码
    confirmPasswordValidator(value) {
      return value === this.formData.newPassword
    },
    
    // 提交表单
    async onSubmit(values) {
      if (this.submitting) return
      
      try {
        this.submitting = true
        
        // 模拟修改密码请求
        this.$toast.loading({ message: '修改中...', duration: 0 })
        
        // 模拟网络请求延迟
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        // 模拟成功响应
        this.$toast.clear()
        this.$toast.success('密码修改成功')
        
        // 清空表单
        this.formData = {
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        }
        
        // 延迟返回个人中心页面
        setTimeout(() => {
          this.$router.push('/user')
        }, 1500)
        
      } catch (error) {
        this.$toast.clear()
        this.$toast('修改密码失败，请稍后重试')
        console.error('修改密码失败:', error)
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style scoped>
.change-password-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 20px;
}

.page-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-icon {
  font-size: 20px;
  margin-right: 20px;
}

.page-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.page-content {
  padding: 15px;
  background-color: #fff;
}

.van-form {
  margin-top: 10px;
}

.van-field {
  margin-bottom: 20px;
}

.button-group {
  margin-top: 30px;
}

.submit-btn {
  width: 100%;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 16px;
}
</style>